<template>
  <div class="singer"	ref="singer">
		<ListView :live="singers" @select="selectSinger" ref="list"></ListView>
		<router-view></router-view>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'
import ListView from 'base/listview/listview'
import {getSingerList} from 'api/singer' //封装请求歌手数据
import {ERR_OK} from 'api/config'
import {playlistMixin} from 'common/js/mixin'
import Singer from 'common/js/singer'//封装歌手img图片class
const HOT_SINGER_LEN = 10
const HOT_NAME = '热门'
export default {
  name: 'singer',
	mixins: [playlistMixin],
	data() {
		return {singers:[]}
	},
	created() {
		this._getSingerList()
	},
	methods:{
		handlePlaylist(playlist) {
			const bottom = playlist.length > 0 ? '60px' : ''
			this.$refs.singer.style.bottom = bottom
			this.$refs.list.refresh()
		},
		_getSingerList(){
			getSingerList().then((res)=>{//获取歌手信息
				if (res.code === ERR_OK) {
					this.singers = this._normalizeSinger(res.data.list)
				} 
			})
		},
		_normalizeSinger(list) { //处理数据
			 let map={ // 编写自己想要的数据结构
				 hot:{
					 title:HOT_NAME ,
					 items:[]
				 }
			 }
			 list.forEach((item,index)=>{
				if (index < HOT_SINGER_LEN) {//热门数据10
						map.hot.items.push(new Singer({
							name: item.Fsinger_name,
							id: item.Fsinger_mid,
						}))
					}
					const key = item.Findex
					if (!map[key]) { //如果没有数据 就在添加数据格式
						map[key] = {
							title: key,
							items: []
						}
					}
					map[key].items.push(new Singer({
						name: item.Fsinger_name,
						id: item.Fsinger_mid,
					}))
			 })
			//为了得到有序列表 处理map  console.log(map)
			let hot=[] //热门
			let ret=[] //剩下的
			for (let key in map) {
				let val=map[key]
				if(val.title.match(/[a-zA-Z]/)){ //字母位子标
					ret.push(val)
				}else if(val.title==HOT_NAME){ //剩下的热们歌手
					hot.push(val)
				}
			}
			ret.sort((a,b)=>{ //比较字母大小 确定位置
				return a.title.charCodeAt(0)-b.title.charCodeAt(0)
			})
			return hot.concat(ret)
		},
		selectSinger(singer){//listview派发的事件
			this.$router.push({
				path:`/singer/${singer.id}`
			})
			this.setSinger(singer)
		},
		...mapMutations({
			setSinger: 'SET_SINGER'
		})
	}, 
	components: {
      ListView
	},
}
</script>

<style lang="scss" scoped >
		.singer{
			position: fixed;
			top: 88px;
			bottom: 0;
			width: 100%;
		}
</style>